<template>
  <div class="line-dialog">
    <div class="title">{{ sourceData.title }}：</div>
    <div class="text-block">
      <div class="text-item" v-for="item in sourceData.text">&nbsp;&nbsp;·&nbsp;&nbsp;{{ item }}</div>
    </div>
    <div v-if="type===4" class="title">{{ sourceData.title2 }}：</div>
    <div v-if="type===4" class="number-block">
      <div class="number-item" v-for="item in sourceData.number">
        <div class="value">{{ item.value }}</div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: "LineDialog",
  props: ['type'],
  data() {
    return {
      source: {
        1: {
          title: '防控范围',
          text: [
            '以市委、市政府周边4条道路为轴，依托120套人脸抓拍、自动预警系统以及交通卡口为前端触角，定人定责定区域巡逻防控，' +
            '通过AR智能眼镜精准辨别发现，4G执法记录仪图像实时和人像抓拍等前端感知设备动态预警，发现异常后快速见面核查劝离，实现重点盯防、外围过滤。'
          ],
          title2: '处置数据',
          number: [
            {
              value: '83%',
              text: '预警发现率'
            },
            {
              value: '3分12秒',
              text: '平均响应时间'
            }
          ]
        },
        2: {
          title: '防控范围',
          text: [
            '以市委、市政府周边4条道路为轴，依托120套人脸抓拍、自动预警系统以及交通卡口为前端触角，定人定责定区域巡逻防控，' +
            '通过AR智能眼镜精准辨别发现，4G执法记录仪图像实时和人像抓拍等前端感知设备动态预警，发现异常后快速见面核查劝离，实现重点盯防、外围过滤。'
          ],
          title2: '处置数据',
          number: [
            {
              value: '83%',
              text: '预警发现率'
            },
            {
              value: '3分12秒',
              text: '平均响应时间'
            }
          ]
        },
        3: {
          title: '力量配置',
          text: [
            '依托市政广场警务站无人机及周边各类视频图像及数据信息，全天候开展视频巡查，当可疑人员群体进入内圈预警后，' +
            '特警、交警、治安警和应急处突组等机动储备力量，按照“融合警务”机制，迅速到场分工协作、联动配合、调查取证、依法处置。',
          ],
          title2: '处置数据',
          number: [
            {
              value: '89%',
              text: '5分钟内到场率'
            },
            {
              value: '95%',
              text: '内圈处置率'
            }
          ]
        },
        4: {
          title: '防护等级',
          text: [
            '聚焦市政府中心区域，依托无人机、人脸识别等前端感知设备，' +
            '实现对重点目标的实时监控与极端事件精准处置，形成“外围过滤、中端阻断、核心攻坚”闭环防控，有效确保了政府核心圈的绝对安全。',
          ],
          title2: '安全记录',
          number: [
            {
              value: '628天',
              text: ' 连续安全天数'
            },
            {
              value: '0次',
              text: '今年预警次数'
            },
            {
              value: '100%',
              text: '防护设备完好率'
            }
          ]
        }
      }
    }
  },
  computed: {
    sourceData() {
      return this.source[this.type]
    }
  }
}
</script>
<style scoped lang="scss">
.line-dialog {
  width: 330px;
  height: 200px;
  padding: 15px 5px;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 2px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0, 198, 255, .3);
  }

  &::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0, 24, 48, .3);
  }
  .title {
    font-family: 冷酷体;
    color: $fontColorYellow;
    margin-bottom: 15px;
    font-size: 18px;
  }

  .text-block {
    .text-item {
      color: #fff;
      font-size: 16px;
      margin-bottom: 15px;
    }
  }

  .number-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .number-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-grow: 1;
      .value {
        font-family: 冷酷体;
        color: $fontColorYellow;
        font-size: 16px;
        margin-bottom: 5px;
      }

      .text {
        color: #fff;
        font-size: 12px;
      }
    }
  }
}
</style>
